<template>
  <div class="twui-bubblebox" :style="{height:boxHeight}">
    <div class="twui-bubble" v-for="(app, index) in apps" :class="['xb'+(index+1)]" :key="index">
      <div class="twui-bubble-inner">
        <div class="twui-bubble-textbox">{{ app.name }}</div>
      </div>
    </div>
  </div>
</template>

<script scoped>
export default{
  props: {
    boxHeight: {
      type: String,
      default: '37vh'
    },
    appData: {
      type: Array
    }
  },
  data () {
    return {
      appItems: [
        {
          name: '校比邻',
          type: 'web应用'
        },
        {
          name: 'Ai作业',
          type: 'web应用'
        },
        {
          name: '综合素质评价系统',
          type: 'web应用'
        },
        {
          name: '天闻ECO云开放平台',
          type: 'web应用'
        },
        {
          name: '在线直播',
          type: 'web应用'
        },
        {
          name: '淄川区教育资源公共服务平台',
          type: 'web应用'
        }
      ]
    }
  },
  computed: {
    apps: function () {
      return this.appData ? this.appData : this.appItems
    }
  }
}
</script>

<style scoped></style>
